<template>
  <div>
    <!--上部导航栏start-->
<admin-nav/>
    <!--上部导航栏end-->
    <div class="container-fluid">
      <div class="row">
        <!--左侧导航栏start-->
<admin-left/>
        <!--左侧导航栏end-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">众筹项目分类</h1>

          <div class="panel panel-default"></div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <div class="panel-title">
                项目分类列表
                <button class="btn" type="button"><router-link to="/add_classity">添加</router-link></button>
              </div>
            </div>
            <div class="panel-body">
              <div class="table-responsive">
                <table class="table table-striped table-bordered">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>分类名称</th>
                      <th>分类描述</th>
                      <!-- <th>添加时间</th> -->
                      <th>分类状态</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr  v-for="(item, index) in dataShow" :key="item.id" :value="item.id">
                      <td>{{index+1}}</td>
                      <td>{{item.name}}</td>
                      <td>{{item.detail}}</td>
                      <!-- <td v-if="">添加时间</td> -->
                      <td v-if="item.status=='1'">可用</td>
                      <td v-else>不可用</td>
                      <td>
                        <a
                          href="#"
                          data-toggle="modal"
                          data-target="#myModal"
                          onclick="getTable(1,'慈善众筹','XXXXXXXXXXX','2018-05-11','可用')"
                          >详情/修改</a
                        >
                        |
                        <a href="#" onclick="getdel(1)">删除</a>
                      </td>
                    </tr>
                    {{msg}}
                  </tbody>
                </table>
              </div>
              <!--模态框-->
              <div
                class="modal fade"
                id="myModal"
                tabindex="-1"
                role="dialog"
                aria-labelledby="myModalLabel"
                aria-hidden="true"
              >
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-hidden="true"
                      >
                        &times;
                      </button>
                      <h4 class="modal-title" id="myModalLabel">分类详情</h4>
                    </div>
                    <div class="modal-body">
                      <div class="form">
                        <form
                          class="form-validate form-horizontal"
                          id="feedback_form"
                          method="post"
                        >
                          <div class="form-group">
                            <label for="p_id" class="control-label col-lg-2"
                              >序号<span class="required"> *</span></label
                            >
                            <div class="col-lg-10">
                              <input
                                class="form-control"
                                id="p_id"
                                type="text"
                                readonly
                              />
                            </div>
                          </div>

                          <div class="form-group">
                            <label for="p_name" class="control-label col-lg-2"
                              >分类名称<span class="required"> *</span></label
                            >
                            <div class="col-lg-10">
                              <input
                                class="form-control"
                                id="p_name"
                                type="text"
                              />
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="p_des" class="control-label col-lg-2"
                              >分类描述<span class="required"> *</span></label
                            >
                            <div class="col-lg-10">
                              <input
                                class="form-control"
                                id="p_des"
                                type="text"
                              />
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="p_time" class="control-label col-lg-2"
                              >添加时间<span class="required"> *</span></label
                            >
                            <div class="col-lg-10">
                              <input
                                class="form-control"
                                id="p_time"
                                type="text"
                                readonly
                              />
                            </div>
                          </div>

                          <div class="form-group">
                            <label for="p_status" class="control-label col-lg-2"
                              >分类状态<span class="required"> *</span></label
                            >
                            <div class="col-lg-10">
                              <select
                                class="form-control m-bot15"
                                id="p_status"
                              >
                                <option>可用</option>
                                <option>禁用</option>
                              </select>
                            </div>
                          </div>
                          <div class="form-group" style="text-align: right">
                            <div class="col-lg-offset-2 col-lg-10">
                              <button
                                class="btn btn-primary"
                                type="button"
                                onclick=""
                              >
                                保存
                              </button>
                              <button class="btn btn-default" type="reset">
                                重置
                              </button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <nav aria-label="Page navigation" class="text-right">
                <ul class="pagination">
                  <li class="disabled">
                    <a href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li><a href="#" @click="prePageFirst">首页</a></li>
                  <li><a href="#" @click="prePage">上一页</a></li>
                  <li v-for="(item2, index) in pageNum" :key="item2"><a href="#" @click="toPage(index)" :class="{active: currentPage==index}"> &nbsp; {{ index+1 }} </a></li>
                  <li><a href="#"  @click="nextPage">下一页</a></li>
                  <li><a href="#" @click="prePageLast">末页</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeList:[],
      msg:'',
      pageSize:2,
      currentPage:0
    }
  },
  created(){
    // 直接查询所有
   this.$axios.get('http://localhost:8080/getType?all=all').then(response => {
    if(response.data.code===1){
      console.log(response.data.data)
      this.typeList = response.data.data
    }else{
      this.typeList = response.data.msg
    }
   }).catch(error => {
      console.error("未登录，请先登陆！");
    })
  },

  computed:{
    // 分页后的数据
    dataShow: function(){
                let start = this.currentPage*this.pageSize;
                let end = Math.min((this.currentPage+1)*this.pageSize, this.typeList.length)
                return this.typeList.slice(start, end)
            },
    // 页码数
      pageNum: function(){
          return Math.ceil(this.typeList.length / this.pageSize) || 1 ;
      },
  },

  methods:{
      prePageFirst:function(){//首页
          var vm = this;
          vm.currentPage=0;
      },
      nextPage: function(){//下一页
          var vm = this;
          if (vm.currentPage == vm.pageNum - 1) return;
          vm.currentPage++;

      },
      prePage: function(){//上一页
          var vm = this;
          if (vm.currentPage == 0)
          return;
          vm.currentPage--;

      },prePageLast:function(){//末页
          var vm = this;
          vm.currentPage=vm.pageNum-1;
      },
      toPage: function(page){
          var vm = this;
          vm.currentPage = page
      }
  }
  };
</script>

<style scoped>
@import url("../../../../public/css/bootstrap.min.css");
@import url("../../../../public/css/dashboard.css");
@import url("../../../../public/css/dialog.css");

</style>